<template>
  <div>
    <textarea :id="tinymceId" v-model="tinymceHtml"></textarea>
  </div>
</template>

<script>
import axios from "@/request/http";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/link"; //超链接插件
import "tinymce/plugins/code"; //代码块插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/contextmenu"; //右键菜单插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/colorpicker"; //选择颜色插件
import "tinymce/plugins/textcolor"; //文本颜色插件
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help";
import "tinymce/plugins/charmap";
import "tinymce/plugins/paste";
import "tinymce/plugins/hr";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/toc";
import "tinymce/plugins/codesample";

export default {
  data() {
    const ide = Date.now();
    return {
      tinymceId: ide,
      tinymceHtml: "",
      DefaultInit: {
        language_url: "/static/tinymce/langs/zh_CN.js", //导入语言文件
        language: "zh_CN", //语言设置
        skin_url: "/static/tinymce/skins/ui/oxide", //主题样式
        height: 500, //高度
        menubar: true, // 隐藏最上方menu菜单
        toolbar: true, //false禁用工具栏（隐藏工具栏）
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        statusbar: false, // 隐藏编辑器底部的状态栏
        elementpath: false, //禁用下角的当前标签路径
        paste_data_images: true, // 允许粘贴图像
        toolbar: [
          "bold italic underline strikethrough blockquote|forecolor backcolor|formatselect |fontsizeselect  | alignleft aligncenter alignright alignjustify | outdent indent |codeformat blockformats| removeformat undo redo ",
          "bullist numlist toc pastetext|codesample charmap  hr insertdatetime |lists image media table link unlink |code searchreplace fullscreen help "
        ],
        plugins:
          "lists image media table wordcount code fullscreen help codesample toc insertdatetime  searchreplace  link charmap paste hr"
      }
    };
  },
  mounted() {
    this.init();
    this.$api.news.getItem().then(res => {
      if (res.data.status == "SUCCESS") {
        console.log(res);
      }
    });
  },
  methods: {
    init() {
      const self = this;
      window.tinymce.init({
        // 默认配置
        ...this.DefaultInit,
        // 图片上传
        images_upload_handler: (blobInfo, success, failure)=>{
          this.$api.news.getUpload(blobInfo).then(res => {
            if (res.data.status == "SUCCESS") {
              success(res.data.result);
            }else{
              failure("上传失败！");
            }
          });
          // axios
          //   .post("/api/mobile/examine/upload/file", formData)
          //   .then(response => {
          //     console.log(response.data["url"]);
          //     if (response.data["code"] == 200) {
          //       success(response.data["url"]);
          //     } else {
          //       failure("上传失败！");
          //     }
          //   });
        },
        // 挂载的DOM对象
        selector: `#${this.tinymceId}`
      });
    }
  }
};
</script>